<template>
  <div class="container">
    <scroll-view :scroll-y="true"
                 @scrolltolower="pullrefresh"
                 :style="{'height': '100%'}">
      <div class="doc-list">
        <div class="list-item">
          <!-- 医生信息 -->
          <div class="left">
            <!-- 头像 -->
            <div class="doc-logo">
              <img :src="baseUrl+baseObj.image"
                   v-if="baseUrl&&baseObj.image"
                   mode="widthFix"
                   class="img" />
            </div>
            <!-- 认证 -->
            <div class="tip">
              <img :src="imgUrl+'3.03/dengji@2x.png'"
                   v-if="imgUrl && isV == 1"
                   class="img" />
            </div>
          </div>
          <!-- 右侧 -->
          <div class="info">
            <div class="doc-info">
              <span class="doc-name"
                    v-if="baseObj.name">{{baseObj.name}}</span>
              <span class="doc-leval"
                    v-if="baseObj.post">{{baseObj.post}}</span>
              <span class="line_j"
                    v-if="baseObj.mainQualification||baseObj.licence||baseObj.qualification">|</span>
              <img class="img_j"
                   v-if="imgUrl&&baseObj.mainQualification||baseObj.licence||baseObj.qualification"
                   :src="imgUrl+'/3.03/img@3x.png'"
                   alt
                   @click="toDoctorPic" />
            </div>
            <!-- 资质 -->
            <div class="zizhi_j">
              <div class="lf_j"
                   v-if="baseObj.qualificationsNumber">资质编号：{{baseObj.qualificationsNumber}}</div>
              <div class="rt_j"
                   @click="collection">
                <img v-if="imgUrl&&!baseObj.collect"
                     :src="imgUrl+'/3.03/unlike@3x.png'"
                     alt />
                <img v-if="imgUrl&&baseObj.collect"
                     :src="imgUrl+'/3.03/like@3x.png'"
                     alt />
              </div>
            </div>
            <!-- 评分 -->
            <div class="score clearfix">
              <div class="item"
                   v-if="baseObj.star">
                <img :src="baseObj.star>=1?'https://h5.ameimeika.com/mp_images/star/pingxing-liang@2x.png':'https://h5.ameimeika.com/mp_images/star/pingxing-hui@2x.png'"
                     alt
                     class="star" />
                <img src="https://h5.ameimeika.com/mp_images/mp_2.4/half_star@2x.png"
                     v-if="baseObj.star==1.5"
                     class="star" />
                <img :src="baseObj.star>=2?'https://h5.ameimeika.com/mp_images/star/pingxing-liang@2x.png':'https://h5.ameimeika.com/mp_images/star/pingxing-hui@2x.png'"
                     alt
                     class="star" />
                <img src="https://h5.ameimeika.com/mp_images/mp_2.4/half_star@2x.png"
                     v-if="baseObj.star==2.5"
                     class="star" />
                <img :src="baseObj.star>=3?'https://h5.ameimeika.com/mp_images/star/pingxing-liang@2x.png':'https://h5.ameimeika.com/mp_images/star/pingxing-hui@2x.png'"
                     alt
                     class="star" />
                <img src="https://h5.ameimeika.com/mp_images/mp_2.4/half_star@2x.png"
                     v-if="baseObj.star==3.5"
                     class="star" />
                <img :src="baseObj.star>=4?'https://h5.ameimeika.com/mp_images/star/pingxing-liang@2x.png':'https://h5.ameimeika.com/mp_images/star/pingxing-hui@2x.png'"
                     alt
                     class="star" />
                <img src="https://h5.ameimeika.com/mp_images/mp_2.4/half_star@2x.png"
                     v-if="baseObj.star==4.5"
                     class="star" />
                <img :src="baseObj.star>=5?'https://h5.ameimeika.com/mp_images/star/pingxing-liang@2x.png':'https://h5.ameimeika.com/mp_images/star/pingxing-hui@2x.png'"
                     alt
                     class="star" />
              </div>
              <span class="num1"
                    v-if="baseObj.star">{{baseObj.star}}分</span>
            </div>
            <!-- 标签 -->
            <!-- <div class="tags">
              <div
                v-if="doctors_tags.length>0"
                v-for="(item,k) in doctors_tags"
                :key="k"
                class="tag-item status-1"
              >
                <div class="icon"></div>
                <div class="msg">{{item.name}}</div>
              </div>
              <div
                v-if="doctors_tag.length>0"
                v-for="(item,k) in doctors_tag"
                :key="k"
                class="tag-item status-2"
              >
                <div class="icon"></div>
                <div class="msg">{{item.name}}</div>
              </div>
            </div>-->
            <!-- 专长 -->
            <!-- <div class="speciality">
              <div v-for="(item,k) in doctors_skill" :key="k" class="speciality-item">{{item.name}}</div>
            </div>-->
          </div>
        </div>
      </div>
      <!-- 关于医生 -->
      <div class="about-doc">
        <h5 class="doc-title">
          <span class="short"></span>&nbsp;关于医生
        </h5>
        <p class="doc-intro"
           :class="isKai&&'heightAuto'"
           v-if="nodesHtml">
          <rich-text :nodes="nodesHtml"
                     space="nbsp"></rich-text>
        </p>
        <!-- 查看全部的按钮 -->
        <div class="seemore_j"
             @click="openOrClose"
             v-if="nodesHtml">
          <img v-if="imgUrl&&!isKai"
               :src="imgUrl+'/3.03/zhankai@3x.png'"
               alt
               @click="to" />
          <img v-if="imgUrl&&isKai"
               :src="imgUrl+'/3.03/shouqi@3x.png'"
               alt
               @click="to" />
        </div>
      </div>
      <!-- 医疗集团- -->
      <div class="hos-msg"
           @click="to_hos()">
        <div class="hos-logo">
          <img v-if="baseUrl&&baseObj.hospitalLogo"
               :src="baseUrl+baseObj.hospitalLogo"
               class="img" />
        </div>
        <div class="hos-right">
          <div class="hos-detail">
            <p class="hos-name"
               v-if="baseObj.hospitalName">{{baseObj.hospitalName}}</p>
          </div>
          <div class="hos-location">
            <img src="https://h5.ameimeika.com/mp_images/mp_2.4/search/dingwei.png"
                 class="img" />
            <p class="hos-address"
               v-if="baseObj.hospitalAddress">{{baseObj.hospitalAddress}}</p>
          </div>
          <div class="divtags clearfix">
            <div class="divtag-item"
                 v-if="baseObj.reservationNumber">预约: {{baseObj.reservationNumber}}</div>
            <span class="hang"
                  v-if="baseObj.caseNumber">|</span>
            <div class="divtag-item"
                 v-if="baseObj.caseNumber">案例: {{baseObj.caseNumber}}</div>
          </div>
        </div>
        <div class="leval"
             v-if="baseObj.hospitalTagName">
          <div class="msg">{{baseObj.hospitalTagName}}</div>
        </div>
      </div>
      <!-- 该医生专长项目 -->
      <div v-if="doctor_major.length>0"
           class="good-at">
        <p class="good-at-pro">该医生专长项目：</p>
        <prolist :project_list="doctor_major"></prolist>
        <div v-if="doctor_majors.length>0 && seemore"
             @click="see_more(1)"
             class="see-more">
          展开全部
          <img src="https://h5.ameimeika.com/mp_images/xia-hui@2x.png"
               class="nav" />
        </div>
        <div v-if="doctor_majors.length>0 &&!seemore"
             @click="see_more(2)"
             class="see-more">
          收起
          <img src="https://h5.ameimeika.com/mp_images/shang-hui@2x.png"
               class="nav" />
        </div>
      </div>
      <!-- hot -->
      <div class="hot">
        <h5 class="hot-title">
          <span class="short"></span>&nbsp;热门推荐
        </h5>
        <prolist :project_list="hotlist"></prolist>
        <div class="nomore"
             v-if="no_more">
          ———
          <span class="no-text">没有更多了</span>———
        </div>
      </div>
    </scroll-view>
  </div>
</template>   

<script>
import common from "@/assets/js/mmk_common.js";
import prolist from "@/components/search_list/projects_list_java";
export default {
  data () {
    return {
      imgUrl: common.image_resource,
      baseUrl: common.image_response,
      id: "",
      seemore: false,
      doctor_major: [],
      doctor_majors: [],
      hotlist: [],
      doctors_skill: [],
      doctors_tag: [],
      doctors_tags: [],
      isbottom: false,
      num: 1,
      lat: "",
      lng: "",
      no_more: false,
      baseObj: {}, //医生详情
      isKai: false, //医生介绍不展开
      nodesHtml: ""//富文本
    };
  },
  onLoad: function (options) {
    Object.assign(this.$data, this.$options.data());
    wx.setNavigationBarTitle({
      title: "医生详情"
    });
    if (options.id) {
      this.id = options.id;
      this.getDoctorDetail();
      this.get_location();
    }
  },
  components: {
    prolist
  },
  methods: {
    // 获取医生详情数据
    getDoctorDetail () {
      common.mmk_Loading(0);
      common.fly_post(
        "api/com.mmk.reservation.api.OpenDoctorProvider/1.0.0/get.html",
        {
          id: parseInt(this.id)
        },
        msg => {
          common.mmk_Loading(1);
          let res = msg.data;
          if (res.code == 0 && res.data) {
            this.baseObj = Object.assign({}, res.data);
            this.nodesHtml = this.baseObj.content ? this.baseObj.content.replace(/\<img/gi, '< img style="max-width:100%;height:auto"') : "";
          } else {
            common.mmk_Loading(2, res.msg);
          }
        },
        "isJava"
      );
    },
    // 医生收藏/取消收藏
    collection () {
      if (!this.baseObj.id) {
        return;
      }
      common.mmk_Loading(0);
      if (!this.baseObj.collect) {
        let id = this.baseObj.id.toString();
        //没有收藏-》收藏
        common.fly_post(
          "api/com.mmk.reservation.api.OpenMmkUserCollectProvider/1.0.0/addMmkUserCollect.html",
          {
            type: 5,
            collectId: id
          },
          msg => {
            common.mmk_Loading(1);
            let res = msg.data;
            if (res.code == 0) {
              this.baseObj.collect = true;
            } else {
              common.mmk_Loading(2, res.msg);
            }
          },
          "isJava"
        );
      } else {
        //收藏过-》取消收藏
        let id = [];
        id = id.concat(this.baseObj.id.toString());
        common.fly_post(
          "api/com.mmk.reservation.api.OpenMmkUserCollectProvider/1.0.0/cancelMmkUserCollects.html",
          {
            type: 5,
            collectIds: id
          },
          msg => {
            common.mmk_Loading(1);
            let res = msg.data;
            if (res.code == 0) {
              this.baseObj.collect = false;
            } else {
              common.mmk_Loading(2, res.msg);
            }
          },
          "isJava"
        );
      }
    },
    // 跳资质图片页面
    toDoctorPic () {
      let mainQualification = this.baseObj.mainQualification
        ? this.baseObj.mainQualification
        : "";
      let licence = this.baseObj.licence ? this.baseObj.licence : "";
      let qualification = this.baseObj.qualification
        ? this.baseObj.qualification
        : "";
      wx.navigateTo({
        url: `/pages/package_projects/doctor_pic/main?mainQualification=${mainQualification}&licence=${licence}&qualification=${qualification}`
      });
    },
    // 医生介绍展开或收起
    openOrClose () {
      this.isKai = !this.isKai;
    },
    //医生列表
    getMall () {
      common.mmk_Loading(0);
      common.fly_post(
        "api/v4_2/doctors/show",
        {
          id: this.id,
          lat: this.lat,
          lng: this.lng,
          user_id: wx.getStorageSync("user_id") || 0
        },
        response => {
          common.mmk_Loading(1);
          let res = response.data;
          if (res.status_code == 0) {
            this.doctor_major = res.data.doctor_major.slice(0, 3);
            this.doctor_majors = res.data.doctor_major.slice(3);
            if (this.doctor_majors.length > 0) {
              this.seemore = true;
            }
            this.doctors_skill = res.data.doctors_skill;
            res.data.doctors_tags.forEach(tag => {
              if (tag.color == 1) {
                //紫色标签
                this.doctors_tag.push(tag);
              } else {
                this.doctors_tags.push(tag);
              }
            });
          }
        }
      );
    },
    hot_list () {
      if (this.isbottom) {
        return false;
      }
      common.fly_post(
        "api/com.mmk.reservation.api.OpenProjectProvider/1.0.0/findDockerRecommandProjectList.html",
        {
          id: this.id + '',
          lat: this.lat + '',
          lng: this.lng + '',
          pageNum: this.num,
          pageSize: 10
        },
        response => {
          let res = response.data;
          if (res.code == 0 && res.data.list) {
            if (res.data.list.length == 0 && this.num == 1) {
              this.hotlist = res.data.list;
            } else if (res.data.list.length > 0 && this.num == 1) {
              this.hotlist = res.data.list;
            } else if (res.data.list.length > 0 && this.num > 1) {
              this.hotlist.push(...res.data.list);
            } else if (res.data.list.length == 0 && this.num > 1) {
              common.mmk_Loading(2, "已经到最底下了");
              this.isbottom = true;
              this.no_more = true;
            }
          }
        }, 'isJava'
      );
    },
    get_location () {
      // 获取经纬度
      let that = this;
      wx.getLocation({
        type: "gcj02", //默认为 wgs84 返回 gps 坐标，gcj02 返回可用于wx.openLocation的坐标,
        success: res => {
          this.lat = res.latitude;
          this.lng = res.longitude;
          this.getMall();
          this.hot_list();
        },
        fail: () => {
          this.getMall();
          this.hot_list();
          wx.showToast({
            title: "获取地理位置失败", //提示的内容,
            icon: "none", //图标,
            duration: 1500, //延迟时间,
            mask: false, //显示透明蒙层，防止触摸穿透,
            success: res => { }
          });
        }
      });
    },
    see_more (e) {
      if (e == 1) {
        this.doctor_major.push(...this.doctor_majors);
        this.seemore = false;
      } else {
        this.doctor_major = this.doctor_major.slice(0, 3);
        this.seemore = true;
      }
    },
    to_hos () {
      wx.navigateTo({
        url: "/pages/package_projects/hospital_detail/main?hos_id=" + this.baseObj.hospitalTagId
      });
    },
    pullrefresh (e) {
      this.num++;
      this.hot_list(this.num);
    }
  }
};
</script>

<style scoped lang="less">
.container {
  height: 100%;
  background: #f3f4f6;
  .doc-list {
    .list-item {
      display: flex;
      padding: 10px 15px;
      background-color: #fff;
      border-bottom: 1px solid rgba(230, 230, 230, 1);
      position: relative;
      .left {
        width: 50px;
        height: 50px;
        position: relative;
        .doc-logo {
          display: block;
          width: 50px;
          height: 50px;
          border-radius: 50%;
          background-color: #ccc;
          position: absolute;
          overflow: hidden;
          .img {
            width: 100%;
            height: 50px !important;
            display: block;
          }
        }
        .tip {
          width: 13px;
          height: 13px;
          position: absolute;
          bottom: 1px;
          right: 3px;
          .img {
            width: 100%;
            height: 100%;
          }
        }
      }
      .info {
        flex: 1;
        padding-left: 10px;
        .doc-info {
          .doc-name {
            font-size: 16px;
            font-family: "PingFangSC-Regular";
            font-weight: 400;
            color: rgba(51, 51, 51, 1);
            line-height: 22px;
            vertical-align: middle;
          }
          .doc-leval {
            font-size: 12px;
            font-family: "PingFangSC-Regular";
            font-weight: 400;
            color: rgba(153, 153, 153, 1);
            line-height: 17px;
            vertical-align: middle;
            margin-left: 5px;
          }
          .line_j {
            display: inline-block;
            width: 1px;
            height: 10px;
            line-height: 10px;
            color: #d8d8d8;
            border-radius: 1px;
            margin-left: 8px;
          }
          .img_j {
            display: inline-block;
            margin-left: 10px;
            width: 21px;
            height: 16px;
            vertical-align: middle;
          }
        }
        .zizhi_j {
          overflow: hidden;
          .lf_j {
            width: 80%;
            float: left;
            height: 28px;
            line-height: 28px;
            font-size: 12px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #999999;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          .rt_j {
            float: right;
            width: 30px;
            height: 30px;
            line-height: 30px;
            img {
              width: 100%;
              height: 100%;
            }
          }
        }
        .hos-name {
          margin-top: 5px;
          font-size: 12px;
          font-family: "PingFangSC-Regular";
          font-weight: 400;
          color: rgba(102, 102, 102, 1);
          line-height: 17px;
        }
        .tags {
          margin-top: 6px;
          padding-left: 10px;
          overflow: hidden;
          .tag-item {
            float: left;
            margin-right: 15px;
            position: relative;
            .icon {
              width: 21px;
              height: 21px;
              background-repeat: no-repeat;
              background-position: center;
              background-size: 100% 100%;
              position: absolute;
              left: 0;
              top: 50%;
              transform: translate(-50%, -50%);
              z-index: 10;
            }
            .msg {
              padding-left: 12px;
              padding-right: 6px;
              height: 16px;
              border-radius: 0px 8px 8px 0px;
              font-size: 11px;
              font-family: "PingFangSC-Semibold";
              font-weight: 600;
              color: rgba(255, 255, 255, 1);
              line-height: 16px;
              background-repeat: no-repeat;
              background-position: right center;
              background-size: 100% 100%;
              letter-spacing: 1px;
            }
          }
          // 蓝色
          .status-1 {
            .icon {
              background-image: url("https://h5.ameimeika.com/mp_images/mp_2.4/search/Group2Copy@2x.png");
            }
            .msg {
              background: rgba(122, 172, 255, 1);
              box-shadow: 0px 1px 1px 0px rgba(110, 169, 252, 0.78);
            }
          }
          // 紫色
          .status-2 {
            .icon {
              background-image: url("https://h5.ameimeika.com/mp_images/mp_2.4/search/@2xGroup2Copy.png");
            }
            .msg {
              background: rgba(155, 155, 255, 1);
              box-shadow: 0px 1px 1px 0px rgba(202, 202, 255, 1);
            }
          }
        }
        .speciality {
          .speciality-item {
            width: 80px;
            height: 21px;
            background: rgba(237, 239, 242, 1);
            border-radius: 11px;
            font-size: 12px;
            font-family: "PingFangSC-Light";
            font-weight: 300;
            color: rgba(51, 51, 51, 1);
            line-height: 21px;
            text-align: center;
            margin-top: 10px;
            margin-right: 5px;
            float: left;
            overflow: hidden;
          }
        }
      }
      .score {
        width: auto;
        display: block;
        height: 15px;
        .item {
          width: 70px;
          height: 14px;
          overflow: hidden;
          display: inline-block;
          .star {
            width: 14px;
            height: 14px;
            float: left;
          }
        }
        .num1 {
          font-size: 10px;
          color: rgba(255, 147, 69, 1);
          margin-left: 6px;
          vertical-align: top;
          line-height: 14px;
        }
      }
    }
  }

  .about-doc {
    padding: 10px 15px;
    background: #ffffff;
    .doc-title {
      font-size: 14px;
      color: rgba(51, 51, 51, 1);
      line-height: 20px;
      .short {
        border-left: solid 2px #8f97ff;
        display: inline-block;
        height: 10px;
      }
    }
    .doc-intro {
      height: 60px;
      margin-top: 5px;
      font-size: 14px;
      font-weight: 400;
      color: rgba(102, 102, 102, 1);
      line-height: 20px;
      width: 100%;
      text-align: left;
      overflow: hidden;
    }
    .heightAuto {
      min-height: 60px;
      height: auto;
    }
    .seemore_j {
      text-align: center;
      margin-top: 8px;
      img {
        width: 20px;
        height: 12px;
      }
    }
  }
  .hos-msg {
    background: #ffffff;
    padding: 14px 15px;
    margin-top: 10px;
    overflow: hidden;
    position: relative;
    padding-right: 6px;
    .hos-logo {
      width: 50px;
      height: 50px;
      display: block;
      float: left;
      border-radius: 50%;
      .img {
        width: 100%;
        height: 100%;
      }
    }
    .hos-right {
      width: 80%;
      float: left;
      padding-left: 14px;
      .hos-detail {
        display: flex;
        .hos-name {
          flex: 2;
          font-size: 15px;
          color: rgba(51, 51, 51, 1);
          line-height: 21px;
        }
        .img {
          display: block;
          flex: 1;
          width: 68px;
          height: 18px;
        }
      }
      .hos-location {
        overflow: hidden;
        margin-top: 4px;
        .img {
          float: left;
          width: 11px;
          height: 12px;
          display: block;
          position: relative;
          top: 3px;
        }
        .hos-address {
          width: 94%;
          font-size: 12px;
          color: rgba(102, 102, 102, 1);
          line-height: 17px;
          float: left;
        }
      }
      .divtags {
        margin-top: 5px;
        .divtag-item {
          height: 20px;
          font-size: 12px;
          font-family: "PingFangSC-Regular";
          font-weight: 400;
          color: #999999;
          line-height: 20px;
          text-align: center;
          display: inline-block;
          margin-right: 5px;
        }
        .hang {
          display: inline-block;
          width: 3px;
          height: 10px;
          color: #d8d8d8;
          border-radius: 2px;
          margin-right: 5px;
        }
      }
    }
    .leval {
      position: absolute;
      top: 14px;
      right: 19px;
      .msg {
        padding-left: 12px;
        padding-right: 6px;
        height: 16px;
        border-radius: 0px 8px 8px 0px;
        line-height: 15px;
        background: rgba(255, 152, 108, 1);
        box-shadow: 0px 1px 1px 0px rgba(255, 91, 118, 0.42);
        font-size: 11px;
        font-weight: 500;
        color: rgba(255, 255, 255, 1);
        position: relative;
        letter-spacing: 1px;
        &::before {
          content: "";
          width: 18px;
          height: 18px;
          line-height: 18px;
          text-align: center;
          border-radius: 50%;
          display: block;
          background-image: url("https://h5.ameimeika.com/mp_images/mp_2.4/search/vvvvv@2x.png");
          background-repeat: no-repeat;
          background-size: cover;
          box-shadow: 0px 1px 2px 0px rgba(255, 98, 117, 0.61);
          position: absolute;
          left: 0;
          top: 50%;
          transform: translate(-50%, -50%);
          font-size: 12px;
          font-weight: 500;
          color: rgba(255, 255, 255, 1);
        }
      }
    }
  }
  .good-at {
    background: #ffffff;
    border-top: solid 1px #eeeeee;
    .good-at-pro {
      padding: 10px 15px 0 15px;
      font-size: 12px;
      color: rgba(102, 102, 102, 1);
      line-height: 17px;
    }
    .see-more {
      position: relative;
      text-align: center;
      padding: 10px 0;
      font-size: 12px;
      color: rgba(102, 102, 102, 1);
      line-height: 17px;
      .nav {
        width: 7px;
        height: 5px;
        position: relative;
        top: 0;
        left: 2px;
        vertical-align: middle;
      }
    }
  }
  .hot {
    .hot-title {
      padding: 10px 15px;
      font-size: 14px;
      color: rgba(51, 51, 51, 1);
      line-height: 20px;
      .short {
        border-left: solid 2px #fe6a9c;
        display: inline-block;
        height: 10px;
      }
    }
  }
}
.nomore {
  opacity: 0.7;
  height: 50px;
  width: 100%;
  text-align: center;
  color: #cccccc;
  font-size: 12px;
  .no-text {
    display: inline-block;
    padding: 20px 0;
    color: #999999;
  }
}
</style>